<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>插槽</title>
		<!-- https://v2.cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88(官网链接) -->
	</head>
	<body>
		<div id="app">

			<todo>

				<todo-title slot="todo-title" v-bind:title="title"></todo-title>
				<todo-itmes slot="todo-items" v-for="(item,index) in items" v-bind:itmes='items'
				v-bind:index='index' v-on:remove="removeItems"></todo-itmes>


			</todo>



		</div>
		<script>
			//定义 待办事项 组件
			Vue.component("todo", {

				template: '<div><slot name=\'todo-title\'></slot><ul><slot name=\'todo-items\'></slot></ul></div>'


			});
			Vue.component("todo-title", {
				props: ['title'],
				template: '<div>{{title}}</div>'


			});
			Vue.component("todo-itmes", {
				props: ['itmes','index'],
				template: '<li>{{index}}--{{itmes}}<button @click="remove">删除</button></li>',
				methods: {

					remove: function() {

						this.$emit("remove")
					}


				}


			})

			var app = new Vue({
				el: '#app',

				data: {

					title: "标题",
					items: ["11", "22", "33"]

				},
				methods: {

					removeItems:function(index) {

						this.items.splice(index,1)

					}

				}



			})
		</script>
	</body>
</html>